<template>
  <div class="chart-wrapper">
    <Echart
      :options="option"
      id="chart-yinhuanxuncha"
    ></Echart>
    <!-- <dv-charts :option="option" /> -->
  </div>
</template>

<script>
import Echart from '@/common/echart'
import _charts from '@/utils/chartConfig'
export default {
  components: { Echart },
  props: {
    config: {
      type: Object,
      default: () => ({}),
    }
  },
  data() {
    return {
      option: {},
    }
  },
  watch: {
    config: {
      handler(val) {
        this.option = {
          xAxis: [_charts.xAxis(val)],
          legend: {},
          color: _charts.color(true),
          yAxis: [_charts.yAxis(val.yAxis[0]), _charts.yAxis(val.yAxis[1])],
          series: [
            {
              type: 'bar',
              ..._charts.bar(val),
              name: val.seriesData.series_0.name,
              data: val.seriesData.series_0.data,
            },
            {
              type: 'bar',
              ..._charts.bar(val),
              name: val.seriesData.series_1.name,
              data: val.seriesData.series_1.data,
            },
            {
              type: 'line',
              name: val.seriesData.series_2.name,
              data: val.seriesData.series_2.data,
              yAxisIndex: 1,
              ..._charts.line(val)
            },
            {
              type: 'line',
              name: val.seriesData.series_3.name,
              data: val.seriesData.series_3.data,
              yAxisIndex: 1,
              ..._charts.line(val)
            },
          ]
        }
        console.log('事项统计', this.option)
      },
      immediate: true,
      deep: true,
    }
  },
  mounted() {},
  methods: {}
}
</script>

<style lang="scss" scoped>
</style>
